<template>
  <div>
    <header>
      <n-bar></n-bar>
      <div>
        <button @click="logout" class="btn">退出登录</button>
      </div>
      <div class="bot_box">
        <div class="top">
          <div class="left">
            <img :src="userinfo.avatarurl" alt="" />
            <p>
              <span>{{ userinfo.nickname }}</span>
              <span>完善资料让小U更懂您</span>
            </p>
          </div>
          <div class="right">
            <img src="../assets/images/红包.png" alt="" />
            <a href="javascript:;">每日签到</a>
          </div>
        </div>
        <div class="bot">
          <p>
            <a href="javascript:;">
              <span>12</span>
            </a>
            <span>我的收藏</span>
          </p>
          <p>
            <a href="javascript:;">
              <span>12</span>
            </a>
            <span>浏览记录</span>
          </p>
          <p>
            <a href="javascript:;"> <span>￥</span><span>0</span> </a>
            <span>我的红包</span>
          </p>
          <p>
            <a href="javascript:;">
              <span>12</span>
            </a>
            <span>优惠券</span>
          </p>
        </div>
        <div class="wrap">
          <div class="wrap_top">
            <p>我的订单</p>
            <a href="javascript:;">
              <p>全部订单</p>
              <span class="iconfont icon-arrow-right"></span>
            </a>
          </div>
          <div class="wrap_bot">
            <van-grid :border="false" :gutter="7" :column-num="4">
              <van-grid-item v-for="item in gridlist" :key="item.id">
                <van-image :src="item.img" />
                <p class="grid-title">{{ item.title }}</p>
              </van-grid-item>
            </van-grid>
          </div>
        </div>
      </div>
    </header>
    <div class="body">
      <div>
        <a href="javascript:;">
          <img src="../assets/images/address.png" alt="" />
          <span>地址管理 </span>
        </a>
        <a href="javascript:;">
          <span class="iconfont icon-arrow-right"></span>
        </a>
      </div>
      <div>
        <a href="javascript:;">
          <img src="../assets/images/wallet.png" alt="" />
          <span>我的钱包</span>
        </a>
        <a href="javascript:;">
          <span>剩余200U币</span>
          <span class="iconfont icon-arrow-right"></span>
        </a>
      </div>
      <div>
        <a href="javascript:;">
          <img src="../assets/images/QR_code.png" alt="" />
          <span>我的二维码</span>
        </a>
        <a href="javascript:;">
          <span class="iconfont icon-arrow-right"></span>
        </a>
      </div>
      <div>
        <a href="javascript:;">
          <img src="../assets/images/partner.png" alt="" />
          <span>我的小伙伴</span>
        </a>
        <a href="javascript:;">
          <span class="iconfont icon-arrow-right"></span>
        </a>
      </div>
      <div>
        <a href="javascript:;">
          <img src="../assets/images/free.png" alt="" />
          <span>0元试用</span>
        </a>
        <a href="javascript:;">
          <span class="iconfont icon-arrow-right"></span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {},
      gridlist: [
        {
          id: 1,
          img: require("../assets/images/1.png"),
          title: "限时秒杀",
        },
        {
          id: 2,
          img: require("../assets/images/4.png"),
          title: "畅销商品",
        },
        {
          id: 3,
          img: require("../assets/images/3.png"),
          title: "品质大牌",
        },
        {
          id: 4,
          img: require("../assets/images/4.png"),
          title: "小U自营",
        },
      ],
    };
  },
  methods: {
    logout() {
      this.$store.dispatch("changeUserAction");
      this.$router.push("/login");
    },
  },
  mounted() {
    let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    this.userinfo = userinfo;
  },
};
</script>

<style scoped>
/* 头部 */
header {
  background: #ff6040;
  box-sizing: border-box;
}

/* 顶部信息 */
header .top_box {
  height: 0.44rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.06rem 0 0.17rem;
  box-sizing: border-box;
}

header .top_box h2 {
  opacity: 0.8;
  font-size: 0.17rem;
  color: #ffffff;
  margin-left: 1.45rem;
}

header .top_box .more {
  width: 0.87rem;
  height: 0.32rem;
  background: rgba(255, 119, 51, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.405rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

header .top_box .more .line {
  width: 1px;
  height: 0.19rem;
  background: rgba(255, 255, 255, 0.25);
}

header .top_box .more a span {
  font-size: 0.19rem;
  opacity: 0.8;
  color: #ffffff;
}

header .bot_box {
  height: 2.1rem;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  box-shadow: 0 0.02rem 0.06rem 0 rgba(255, 149, 128, 0.5);
  margin-top: 0.06rem;
  display: flex;
  flex-direction: column;
}

header .bot_box .top {
  display: flex;
  justify-content: space-between;
}

header .bot_box .top .left {
  display: flex;
  margin-left: 0.1rem;
}

header .bot_box .top .left img {
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 50%;
}

header .bot_box .top .left p {
  display: flex;
  flex-direction: column;
  margin-left: 0.1rem;
}

header .bot_box .top .left p span:nth-child(1) {
  font-size: 0.18rem;
  color: #ffffff;
  margin-bottom: 0.1rem;
}

header .bot_box .top .left p span:nth-child(2) {
  width: 1.4rem;
  height: 0.16rem;
  border: 0.01rem solid #ffffff;
  border-radius: 0.01rem;
  font-size: 0.1rem;
  color: #ffffff;
  text-align: center;
  line-height: 0.16rem;
}

header .bot_box .top .right {
  width: 0.76rem;
  height: 0.2rem;
  background: #ffd4cc;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.1rem 0 0 0.1rem;
  margin-top: 0.2rem;
}

header .bot_box .top .right img {
  width: 0.16rem;
  height: 0.16rem;
}

header .bot_box .top .right a {
  font-size: 0.1rem;
  color: #ff6243;
}

header .bot_box .bot {
  display: flex;
  justify-content: space-around;
}

header .bot_box .bot p {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.15rem;
}

header .bot_box .bot p:nth-child(1) a,
header .bot_box .bot p:nth-child(2) a,
header .bot_box .bot p:nth-child(3) a,
header .bot_box .bot p:nth-child(4) a {
  font-size: 0.18rem;
  color: #ffffff;
}

header .bot_box .bot p:nth-child(3) a span:nth-child(1) {
  font-size: 0.1rem;
}

header .bot_box .bot p > span {
  font-size: 0.1rem;
  color: #ffffff;
}

header .bot_box .wrap {
  width: 3.55rem;
  height: 1.13rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0.15rem 0.1rem 0 0.1rem;
  padding: 0.1rem 0.1rem 0 0.1rem;
  box-sizing: border-box;
  border-radius: 4px;
}

header .bot_box .wrap .wrap_top {
  height: 0.16rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .bot_box .wrap .wrap_top a {
  display: flex;
  align-items: center;
}

header .bot_box .wrap .wrap_top > p {
  font-size: 0.16rem;
  color: #333333;
}

header .bot_box .wrap .wrap_top a p {
  font-size: 0.12rem;
  color: #ff6040;
}

header .bot_box .wrap .wrap_top a span {
  font-size: 0.08rem;
  color: #ff6040;
}

.grid-title {
  font-size: 0.14rem;
}

/* header .bot_box .wrap .wrap_bot {
  height: 0.77rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 0.15rem;
}

header .bot_box .wrap .wrap_bot a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.1rem;
  color: #333333;
}

header .bot_box .wrap .wrap_bot a img {
  width: 0.32rem;
  height: 0.32rem;
} */

.body {
  width: 3.75rem;
  height: 2.1rem;
  background-color: #fff;
  margin-top: 0.46rem;
  padding: 0.2rem 0.1rem 0 0.1rem;
  box-sizing: border-box;
}

.body div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}

.body div a {
  font-size: 0.12rem;
  color: #333333;
  font-weight: bold;
}

.body div a:nth-child(2) span {
  font-size: 0.08rem;
  color: #666666;
}

.body img {
  width: 0.16rem;
  height: 0.16rem;
}

.body div:nth-child(2) a:nth-child(2) span:nth-child(1) {
  color: #666666;
  font-weight: normal;
}
</style>
